<template>
  <view class="mock-test-container">
    <view class="mock-test-title">请选择试题类型</view>
    <view class="filterBox">
      <view class="filter-input">
        <u-icon name="search" color="#9B9FAC" size="22"></u-icon>
        <input
          class="search-text"
          type="text"
          v-model="inputVal"
          confirm-type="关键字搜索"
          @input="handleFllter"
          @confirm="handleFllter"
          placeholder="关键字搜索"
        />
      </view>
    </view>
    <scroll-view scroll-y="true" style="height: calc(100vh - 520rpx)">
      <!--<view class="mock-test-list">
        <view
          v-for="(item, index) in list"
          :key="index"
          @click="itemClickHandle(item)"
          class="list-item"
          :class="{ active: active == item.typeId }"
        >
          <text class="title" :class="{ active: active == item.typeId }">{{ item.typeName }}</text>
          <image class="icon" v-if="active == item.typeId" src="/static/images/work/dbd/selected_yes.png"> </image>
          <image class="icon" v-else src="/static/images/work/dbd/selected_no.png"></image>
        </view>
      </view>-->
      <view class="tree-container">
        <tree-item
          v-for="item in treeData"
          :key="item.typeId"
          :node="item"
          :is-expand="isExpand"
          :selected-id="selectedId"
          @update:selected-id="onSelect"
        />
      </view>
    </scroll-view>

    <view class="next-step-btn" @click="btnClickHandle"> 下一步 </view>

    <!-- 题库训练进入时 -->
    <tip-dialog v-model="tipDialogVisible" @confirm="keepOn" @cancel="giveUp" :type="'primary'">
      <view>是否开始训练</view>
    </tip-dialog>
  </view>
</template>

<script>
import { getExaminationTypeListByTree } from '@/api/educational-training/trainingTasks.js'
import TipDialog from './TipDialog'
import { cloneDeep } from 'lodash'
import TreeItem from './component/TreeItem.vue';

export default {
  components: {
    TipDialog,
    TreeItem
  },
  data() {
    return {
      active: undefined,
      list: [],
      allList: [],
      tipDialogVisible: false,
      inputVal: '',
      selectedItem: '',
      selectedId: null,
      isExpand: false,
      treeData: [],
      treeData2: [ // 原始树形数据
        {
          id: 1,
          label: '一级节点1',
          children: [
            {
              id: 11,
              label: '二级节点1-1',
              children: [
                {
                  id: 111,
                  label: '三级节点1-1-1',
                },
                {
                  id: 112,
                  label: '三级节点1-1-2',
                },
              ],
            },
            {
              id: 12,
              label: '二级节点1-2',
            },
          ],
        },
        {
          id: 2,
          label: '一级节点2',
          children: [
            {
              id: 21,
              label: '二级节点2-1',
            },
          ],
        },
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleFllter() {
      if (this.inputVal) {
        this.isExpand = true
        let filterData = this.filterTree(this.allList, this.inputVal)

        if (filterData && filterData.length > 0) {
          this.treeData = filterData
        } else {
          this.treeData = []
        }
      } else {
        this.isExpand = false
        this.treeData = cloneDeep(this.allList)
      }
    },
    getList() {
      getExaminationTypeListByTree(1).then(res=>{
        this.treeData = this.allList = res.data
      })
    },
    itemClickHandle(item) {
      this.active = item.typeId != this.active ? item.typeId : undefined
    },
    btnClickHandle() {
      console.log('selectedId', this.selectedId)
      if (!this.selectedId) {
        uni.showToast({
          icon: 'error',
          title: '请选择考试类型'
        })
        return
      }
      this.tipDialogVisible = true
    },
    // 开始
    keepOn() {
      uni.navigateTo({
        url: `/pages/work/online-examination/take-part-examination?id=${this.selectedId}`
      })
    },
    // 取消
    giveUp() {
      this.tipDialogVisible = false
    },
    handleSelect(label) {
      console.log('label', label)
      this.selectedItem = label;
    },
    onSelect(id) {
      console.log('id', id)
      this.selectedId = id;
    },

    // 树形目录模糊查询
    filterTree(data, keyword) {
      if (!keyword) {
        // 如果没有关键字，返回原始数据
        return data;
      }
      const result = [];
      data.forEach((node) => {
        const lowerKeyword = keyword.toLowerCase();
        const lowerLabel = node.typeName.toLowerCase();
        const isMatch = lowerLabel.includes(lowerKeyword); // 判断当前节点是否匹配关键字
        const children = node.children ? this.filterTree(node.children, keyword) : null; // 递归过滤子节点

        if (isMatch || (children && children.length > 0)) {
          // 如果当前节点匹配关键字，或者子节点有匹配项，则保留当前节点
          const filteredNode = { ...node };
          if (children && children.length > 0) {
            filteredNode.children = children; // 更新子节点
          } else {
            delete filteredNode.children; // 如果子节点为空，删除子节点属性
          }
          result.push(filteredNode);
        }
      });
      return result;
    }
  }
}
</script>

<style lang="scss" scoped>
.filterBox {
  padding: 15rpx 32rpx;
  background-color: #fff;
  .filter-input {
    height: 78rpx;
    background-color: #f5f5f5;
    border-radius: 40rpx;
    display: flex;
    align-items: center;

    padding-left: 40rpx;
    .filterImg {
      width: 32rpx;
      height: 32rpx;
      margin-right: 20rpx;
      margin-bottom: 5rpx;
    }
    .filterImgs {
      width: 32rpx;
      height: 32rpx;
    }
    .search-text {
      width: 84%;
      font-size: 26rpx;
      color: #9b9fac;
    }
  }
}
.mock-test-container {
  padding: 80rpx 50rpx;
  background: #fff;
  height: calc(100vh - 88rpx);
  /* #ifdef APP-PLUS */
  height: 100vh;
  /* #endif */
  overflow-y: auto;

  .mock-test-title {
    font-size: 48rpx;
    color: #333333;
    line-height: 67rpx;
    margin-bottom: 50rpx;
  }

  .mock-test-list {
    .list-item {
      min-height: 150rpx;
      background: #f6f7f9;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 40rpx;
      padding: 0 40rpx;
      border: 1rpx solid #f6f7f9;
      transition: ease-in-out 0.1s;

      &:active {
        transform: scale(0.99);
      }

      &.active {
        box-shadow: 0px 10rpx 20rpx 1rpx rgba(44, 170, 184, 0.1);
        border: 1rpx solid #88b4c4;
      }

      .title {
        flex: 1;
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
        word-break: break-all;
      }

      .icon {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }

  .next-step-btn {
    position: fixed;
    left: 75rpx;
    right: 75rpx;
    bottom: 40rpx;
    height: 98rpx;
    background: #454a5e;
    border-radius: 50rpx;
    font-size: 36rpx;
    color: #ffffff;
    line-height: 98rpx;
    text-align: center;
  }
}
.tree-container {
  width: 85%;
  margin: 0 auto;
}
</style>
